<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>学生管理</span>
        <el-button type="primary" link @click="$emit('show-add-student')">添加学生</el-button>
      </div>
    </template>
    <el-table :data="students?.records || []" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="学生ID" width="100"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="fullName" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-popconfirm title="确定将该学生移出班级吗？" @confirm="$emit('remove-student', scope.row.id)">
            <template #reference>
              <el-button type="danger" link size="small">移除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无学生"></el-empty>
      </template>
    </el-table>
    <el-pagination
      v-if="students?.total > 0"
      style="margin-top: 20px; justify-content: flex-end;"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="students.total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
/* global defineProps, defineEmits */
import { computed } from 'vue';

const props = defineProps({
  students: Object, // 包含 records, total, size, current, pages 的对象
  loading: Boolean,
});

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'remove-student', 'show-add-student']);

// 使用 computed 属性来处理分页器的 v-model
const currentPage = computed({
  get: () => props.students?.current || 1,
  set: (value) => emit('update:currentPage', value),
});

const pageSize = computed({
  get: () => props.students?.size || 10,
  set: (value) => emit('update:pageSize', value),
});

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style> 